<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			1 两边固定 当中自适应
			2 当中列要完整显示
			3 当中列要优先加载。但是目前使用的布局加载顺序是：left->right->middle
			（middle中的文字，为什么能看见？按照教程中的说法：因为float布局，left只会浮动半层。middle中的文字被left所在的半层卡住了）
			*/
		   
		   /*
		   总结：
		   三列布局的实现方法优劣？
		   1、不要使用“定位布局”。原因：
			1.1 定位布局需要一个容器，这个容器必须相对定位，也就是body 必须是 position:relative。
			1.2 提升层级，编写页面的其他部分，会带来困扰。比如：middle部分的文字会看不见。
		   2、不要使用“浮动布局”。原因：
			1.1 可以实现。而且功能齐全。但是当网络不好的时候，会先加载完成 left和right 再加载middle，用户体验不好。
		   3、那么请看下一课的“圣杯布局”
			H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷css2.1教程\视频\05.尚硅谷_css2.1_圣杯布局
		   */
			
			* {
				margin: 0;
				padding: 0;
			}
			
			body{
				/*
				计算公式： 2*left+right
				但是实际上这个方案达不到效果。
				因为这三个div的包含块是初始包含块，middle被挤出来的部分会在右边。
				
				不要用定位来处理布局
				因为定位脱离了文档流
				
				这是使用float处理布局
				*/
				min-width: 600px;
			}

			div {
				height: 100px;
			}

			.left,
			.right {
				width: 200px;
				background: pink;
			}
			
			.middle{
				background: deeppink;
			}
			
			.left{
				float: left;
			}
			
			.right{
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="middle">middle</div>
	</body>
</html>
